<template>
  <div class="snacks">
      <div class="title">{{floorName}}</div>
      <div class="oneSnacks" clearfix>
          <!-- <router-link v-for="item of floors" :key="item.goodsId" :to="{name:'detail',params:{id:item.goodsId}}"> -->
            <img v-lazy="item.image" v-for="item of floors" :key="item.goodsId" @click="showGoods(item.goodsId)">
          <!-- </router-link> -->
      </div>
  </div>
</template>

<script>
export default {
  props: ["floors","floorName"],
  methods:{
    showGoods(id){
        // console.log(this)
        this.$parent.$parent.getDetail(id)
    }
  }
};
</script>
<style lang="scss" scoped>
    .snacks{
        width: 100%;
        .title {
        height: 35px;
        font-size: 14px;
        line-height: 35px;
        text-align: center;
        }
        .oneSnacks{
          height: 291px;
            vertical-align: top;
          img{
            width: 187.5px;
            height: 99px;
            float: left;
          }
          &>a:nth-child(1) img{
            border-right: 1px solid #eeeeee;  
            height: 198px;
          }
          &>a:nth-child(2) img,&>a:nth-child(3) img{
            border-bottom: 1px solid #eeeeee;
          }
          &>a:nth-child(4) img{
            border-right: 1px solid #eeeeee;
          }
        }
    }
</style>